﻿<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title></title>
	<meta charset="utf-8" />
	<link href="../../dist/css/ud2.css" rel="stylesheet" />
	<link href="../src/test.css" rel="stylesheet" />
	<script src="../../vendor/js/jquery.js"></script>
	<script src="../../dist/js/ud2.js"></script>
</head>
<body>

	<h3>消息样式</h3>

	<fieldset>
		<legend>样式</legend>
		<div>
			<h5>消息样式</h5>
			<p>
				<div class="message">
					<div class="message-content">这是一个消息</div>
				</div>
				<hr class="hr hr-dotted" />
				<div class="message c-purple">
					<div class="message-content"><i class="ico ico-bank"></i>这是一个消息</div>
				</div>
			</p>

			<hr class="hr" />

			<h5>颜色样式</h5>
			<p>
				<div class="message c-grey">
					<div class="message-content">这是一个灰色消息</div>
				</div>
				<hr class="hr hr-dotted" />
				<div class="message c-dark">
					<div class="message-content">这是一个深色消息</div>
				</div>
				<hr class="hr hr-dotted" />
				<div class="message c-blue">
					<div class="message-content">这是一个蓝色消息</div>
				</div>
				<hr class="hr hr-dotted" />
				<div class="message c-orange">
					<div class="message-content">这是一个橙色消息</div>
				</div>
				<hr class="hr hr-dotted" />
				<div class="message c-green">
					<div class="message-content">这是一个绿色消息</div>
				</div>
				<hr class="hr hr-dotted" />
				<div class="message c-red">
					<div class="message-content">这是一个红色消息</div>
				</div>
				<hr class="hr hr-dotted" />
				<div class="message c-yellow">
					<div class="message-content">这是一个黄色消息</div>
				</div>
				<hr class="hr hr-dotted" />
				<div class="message c-teal">
					<div class="message-content">这是一个天蓝色消息</div>
				</div>
				<hr class="hr hr-dotted" />
				<div class="message c-violet">
					<div class="message-content">这是一个紫蓝色消息</div>
				</div>
				<hr class="hr hr-dotted" />
				<div class="message c-purple">
					<div class="message-content">这是一个紫色消息</div>
				</div>
				<hr class="hr hr-dotted" />
				<div class="message c-pink">
					<div class="message-content">这是一个粉色消息</div>
				</div>
				<hr class="hr hr-dotted" />
				<div class="message c-brown">
					<div class="message-content">这是一个棕色消息</div>
				</div>
			</p>

			<hr class="hr" />

			<h5>带有关闭按钮的消息</h5>
			<p>
				<div class="message c-green">
					<div class="message-content">这是一个带有关闭按钮的消息</div>
					<a class="message-close"></a>
				</div>
			</p>

			<hr class="hr" />

			<h5>带有自定义按钮的消息</h5>
			<p>
				<div class="message c-red">
					<div class="message-content">这是一个带有自定义按钮的消息</div>
					<a class="btn"><i class="ico ico-record"></i>自定义按钮</a>
					<a class="message-close"></a>
				</div>
			</p>

			<hr class="hr" />

			<h5>尺寸方案</h5>
			<p>
				<div class="message c-pink sm">
					<div class="message-content">这是一个带有自定义按钮的消息</div>
					<a class="btn"><i class="ico ico-record"></i>自定义按钮</a>
					<a class="message-close"></a>
				</div>
				<hr class="hr hr-dotted" />
				<div class="message c-pink">
					<div class="message-content">这是一个带有自定义按钮的消息</div>
					<a class="btn"><i class="ico ico-record"></i>自定义按钮</a>
					<a class="message-close"></a>
				</div>
				<hr class="hr hr-dotted" />
				<div class="message c-pink lg">
					<div class="message-content">这是一个带有自定义按钮的消息</div>
					<a class="btn"><i class="ico ico-record"></i>自定义按钮</a>
					<a class="message-close"></a>
				</div>
			</p>

			<hr class="hr" />

			<h5>圆角方案</h5>
			<p>
				<div class="message round c-orange">
					<div class="message-content">这是一个带有自定义按钮的消息</div>
					<a class="btn"><i class="ico ico-record"></i>自定义按钮</a>
					<a class="message-close"></a>
				</div>
			</p>

			<hr class="hr" />

			<h5>方角方案</h5>
			<p>
				<div class="message square c-orange">
					<div class="message-content">这是一个带有自定义按钮的消息</div>
					<a class="btn"><i class="ico ico-record"></i>自定义按钮</a>
					<a class="message-close"></a>
				</div>
			</p>

			<hr class="hr" />

			<h5>功能方案</h5>
			<p>
				<div class="message message-round info">
					<div class="message-content">这是一个带有自定义按钮的消息</div>
				</div>
				<hr class="hr hr-dotted" />
				<div class="message message-round success">
					<div class="message-content">这是一个带有自定义按钮的消息</div>
					<a class="message-close"></a>
				</div>
				<hr class="hr hr-dotted" />
				<div class="message message-round warning">
					<div class="message-content">这是一个带有自定义按钮的消息</div>
					<a class="btn"><i class="ico ico-record"></i>自定义按钮</a>
				</div>
				<hr class="hr hr-dotted" />
				<div class="message message-round danger">
					<div class="message-content">这是一个带有自定义按钮的消息</div>
					<a class="btn"><i class="ico ico-record"></i>自定义按钮</a>
					<a class="message-close"></a>
				</div>
			</p>

		</div>
	</fieldset>

</body>
</html>
